<template>


  <div class="content" style="background: #fff;padding: 30px;" :bordered="false">

    <a-row :gutter="24" style="margin-left: 0px;margin-right: 0px;margin-top:20px">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="已提现" total="￥126,560">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <trend flag="up" style="margin-right: 16px;">
              <span slot="term">周同比</span>
              12%
            </trend>
            <trend flag="down">
              <span slot="term">日同比</span>
              11%
            </trend>
          </div>
          <template slot="footer">日均销售额<span>￥ 234.56</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="待提现" :total="8846">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-area />
          </div>
          <template slot="footer">日访问量<span> {{ '1234' }}</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="今日收入" :total="6560">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-bar />
          </div>
          <template slot="footer">转化率 <span>60%</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="累计收入" total="78%">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" height="8px" />
          </div>
          <template slot="footer">
            <trend flag="down" style="margin-right: 16px;">
              <span slot="term">同周比</span>
              12%
            </trend>
            <trend flag="up">
              <span slot="term">日环比</span>
              80%
            </trend>
          </template>
        </chart-card>
      </a-col>
    </a-row>


    <div class="table-operator">
      <a-button type="primary" icon="add">收入流水</a-button>
    </div>

    <a-table
      :columns="merchantAccountJournalColumns"
      :dataSource="merchantAccountJournalList"
      rowKey="id"
      :pagination="pagination"
    >
    </a-table>

  </div>
</template>
<script>
import {
  ChartCard,
  MiniArea,
  MiniBar,
  MiniProgress,
  Trend,
  NumberInfo,
} from '@/components'
import { getMerchantAccountJournalList } from '@/api/mall/merchantAccountJournal'
import { merchantAccountJournalColumns } from '@/const/crud/mall/merchantAccountJournalColumns.config'
import { mixinDevice } from '@/utils/mixin'

export default {
  name: 'sharebenefit',
  mixins: [mixinDevice],
  components: {
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    Trend,
    NumberInfo,
  },
  data() {
    return {
      form: [],
      formEdit: this.$form.createForm(this),
      merchantAccountJournalColumns,
      value: 1,
      addDatas: [],
      merchantAccountJournalList: [],
      visible: false,
      visible2: false,
      loading: true,
      pagination: {
        total: 0,
        pageSize: 10,
        showSizeChanger: true,
        showTotal: total => `共有${total}条`
      },
      pieStyle: {
        stroke: '#fff',
        lineWidth: 1
      }
    }
  },
  methods: {
    addForm() {
      this.visible = true
      this.addDatas = []
    },
    handleSubmit(e) {

    },
    getList() {
      getMerchantAccountJournalList().then(res => {
        this.merchantAccountJournalList = res.data
      })
    },

    handleSubmitEdit(e) {

    },
    deleteRow(val) {
      // console.log(val)
      var _this = this
      this.$confirm({
        title: '提示',
        content: `此操作将永久删除该运费模板--- ${val.id} ---,是否继续?`,
        okText: '确定',
        okType: 'primary',
        cancelText: '取消',
        onOk() {
          let params = new FormData()
          params.append('templateId', val.id)

        }
      })
    }
  },
  created() {
    this.getList()
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
  }
}
</script>
<style lang="less" scoped>
.flyray-btn{
  font-size:12px;padding:0 7px;margin:0 0 0 3px;height:24px;
}
.table-danger,
.table-danger:focus {
  color: #fff;
  background-color: #ff4d4f;
  border-color: #ff4d4f;
  margin-left: 5px;
}
.mymodel {
  .ant-modal {
    top: 0;
    padding: 0;
    .ant-modal-content {
      .ant-form-item-label {
        margin-right: 80px;
        label {
          font-weight: 700;
          color: #606366;
          width: 150px;
          &::after {
            content: '';
          }
        }
      }
      .ant-input {
        height: 36px;
      }
      .has-error .ant-form-explain {
        color: #f56c6c;
        font-size: 13px;
        line-height: 1;
        padding-top: 4px;
      }
      label.ant-radio-wrapper-checked {
        span {
          color: #1890ff;
        }
      }
    }
    .ant-modal-header {
      border-bottom: none;
      .ant-modal-title {
        font-size: 18px;
      }
    }
    .ant-modal-body {
      padding-bottom: 90px;
    }
    .ant-modal-footer {
      padding: 0 16px;
      border: none;
    }
    .add-table {
      thead {
        th {
          padding: 20px 0px;
          color: #909399;
          font-weight: 700;
          background-color: #fff;
          div {
            padding-left: 10px;
          }
        }
      }
      .ant-empty-normal {
        margin: 0;
        .ant-empty-image {
          display: none;
        }
      }
    }
    .mybutton {
      text-align: right;
      bottom: 30px;
      right: 0px;
      margin-top: 20px;
    }
    .cancelMymodel {
      margin-right: 10px;
    }
  }
}
.mymodel-two {
  z-index: 1001;
  .ant-modal {
    top: 30px;
    .ant-modal-content {
      height: 858px !important;
      .ant-form-item-label {
        margin-right: 30px;
      }
    }
  }
  .ant-checkbox-wrapper + .ant-checkbox-wrapper {
    margin-left: 0;
  }
  .ant-checkbox-wrapper {
    height: 42px;
    line-height: 42px;
    margin-right: 20px;
    user-select: none;
  }
}
.ant-modal-confirm {
  top: 35%;
}
</style>
